<template>
  <view class="content">
    <view class="box shadow">
      <u--form
        labelPosition="left"
        labelAlign="left"
        :model="theForm"
        labelWidth="80"
        :rules="rules"
        ref="uForm"
      >
        <u-form-item
          :label="item.label"
          :prop="item.rulesProp || ''"
          v-for="item in fields"
          :key="item.field"
          :required="item.required"
          @click="formItemClick(item)"
        >
          <u--input
            v-if="item.component == 'input'"
            v-model="theForm[item.field]"
            :readonly="item.readonly"
            border="surround"
          ></u--input>
          <u--textarea
            v-if="item.component == 'textarea'"
            v-model="theForm[item.field]"
            border="surround"
          ></u--textarea>
          <!--  -->
        </u-form-item>
      </u--form>
      <view class="submit">
        <u-button
          text="提交"
          shape="circle"
          color="linear-gradient(180deg, #447FD7 0%, #001A70 100%)"
        ></u-button>
      </view>
      <u-datetime-picker
        ref="datetimePicker"
        :show="show"
        :minDate="nows"
        mode="datetime"
        @confirm="confirmDateTime"
        :formatter="formatter"
      ></u-datetime-picker>
    </view>
  </view>
</template>
<script>
import variables from "../../../static/style/index.scss";
export default {
  data() {
    return {
      variables: variables,
      theForm: {
        area: "",
        user: "",
        concat: "",
        describe: "",
        img: "",
      },
      show: "",
      field: "",
      fields: [
        {
          label: "申请人",
          component: "input",
          required: true,
          field: "userName",
          rulesProp: "",
        },
        {
          label: "申请单位",
          component: "input",
          required: true,
          field: "department",
        },
        {
          label: "车牌号",
          component: "input",
          field: "licensePlate",
          required: true,
        },
        {
          label: "联系方式",
          component: "input",
          required: true,
          field: "contact",
        },
        {
          label: "进入时间",
          component: "input",
          required: true,
          field: "inTime",
          readonly: true,
        },
        {
          label: "离开时间",
          component: "input",
          required: true,
          field: "outTime",
          readonly: true,
        },
        {
          label: "备注",
          component: "input",
          required: true,
        },
      ],
      fileList: [],
      rules: {
        "theForm.area": {
          type: "string",
          required: true,
          message: "报修区域",
          trigger: ["blur", "change"],
        },
      },
      nows: new Date().getTime(),
    };
  },
  onReady() {
    // 微信小程序需要用此写法
    this.$refs.datetimePicker.setFormatter(this.formatter);
  },
  mounted() {
    console.log({ variables });
  },
  methods: {
    afterRead(file, lists) {
      console.log(file, lists);
    },
    formItemClick(item) {
      if (!["inTime", "outTime"].includes(item.field)) return;
      this.field = item.field;
      this.show = true;
    },
    confirmDateTime(e) {
      console.log({ e });
      if (!["inTime", "outTime"].includes(this.field)) return;
      this.theForm[this.field] = uni.$u.timeFormat(
        e.value,
        "yyyy-dd-mm hh:MM:ss"
      );
      this.show = false;
    },
    formatter(type, value) {
      const map = {
        year: "年",
        month: "月",
        day: "日",
        hour: "时",
        minute: "分",
      };
      return map[type] ? `${value}${map[type]}` : value;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
